<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--<input type="file" accept="image/*">-->
    <!--<div id="imgBox">
        
    </div>-->
   	<video width="300" height="200" controls="controls"  autoplay="autoplay">
		<source src="./video/layabox_product.mp4" type="video/mp4"></source>
		<source src="myvideo.ogv" type="video/ogg"></source>
		<source src="myvideo.webm" type="video/webm"></source>
		<object  type="application/x-shockwave-flash" data="myvideo.swf">
			<param name="movie" value="myvideo.swf" />
			<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
		</object>
		当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
	</video>
    
</body>
<script>
//  function change(self){
//      //上传图片之后的对象数组；（如果后台约定直接通过formData上传，直接上传这里面的对象就好了，可以自行百度）
//      console.log(self.files);
//      //创建一个读取文件的对象
//      let reader = new FileReader();
//      //读取文件，转码
//      reader.readAsDataURL(self.files[0]);
//      reader.onload = function (e) {
//          let base64 = e.target.result; //转码过后的base64编码
//          console.log("压缩前", base64.length / 1024);
//          //创建一个图片
//          let newImage = new Image();
//          let quality = 0.6;    //压缩系数0-1之间，压缩到0.9以上会有bug，注意！（可以自行设置）
//          newImage.src = base64;
//          newImage.setAttribute("crossOrigin", 'Anonymous');	//url为外域时需要
//          let imgWidth, imgHeight;
//          console.log("图片开始加载")
//          newImage.onload = function () {
//              	console.log("图片加载完成")
//          	
//              imgWidth = this.width;
//              imgHeight = this.height;
//              //给生成图片设置一个默认的最大宽/高（可以自行设置）
//              let myWidth = 800;
//              //准备在画布上绘制图片
//              let canvas = document.createElement("canvas");
//              let ctx = canvas.getContext("2d");
//              //判断上传的图片的宽高是否超过设置的默认最大值，以及设置同比例的宽高
//              if (Math.max(imgWidth, imgHeight) > myWidth) {
//              	console.log(123)
//                  if (imgWidth > imgHeight) {
//                      canvas.width = myWidth;
//                      canvas.height = myWidth * imgHeight / imgWidth;
//                  } else {
//                      canvas.height = myWidth;
//                      canvas.width = myWidth * imgWidth / imgHeight;
//                  }
//              } else {
//              	console.log(456)
//              	
//                  canvas.width = imgWidth;
//                  canvas.height = imgHeight;
//              }
//              //清空画布
//              ctx.clearRect(0, 0, canvas.width, canvas.height);
//              //开始绘制图片到画布上
//              ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
// 
//              //绘制水印
//              //ctx.font="20px microsoft yahei";
//              //ctx.fillStyle="rgba(255,255,255,0.5)";
//              //ctx.fillText('水印文字',100,100)
// 
//              let newBase64 = canvas.toDataURL("image/jpeg", quality);//压缩图片大小（关键代码）
//              // 获取到当前的图片的大小，然后调整成自己需要的大小，例如说需要200KB-500KB之间（可以自行设置）
//              while (newBase64.length / 1024 > 200) {
//              	console.log(123);
//                  quality -= 0.2;
//                  newBase64 = canvas.toDataURL("image/jpeg", quality);
//              }
//              myCallback(newBase64);//回调函数，做你想要的操作（可以自行设置）
//          }
//      };
// 
//  }
//  function myCallback(base64) {
//      console.log("压缩后", base64.length / 1024)
//      document.getElementById("imgBox").innerHTML="<img src="+base64+">"
//  }
 
</script>
</html>
